@import "../../style/public";
.openMessageMarketing {
  .form-title {
    @include remCalc(padding, 20, 30);
    @include remCalc(font-size, 24);
    color: #999;
  }
  .form-tip {
    @include remCalc(font-size, 24);
    color: #999;
    @include remCalc(padding, 20, 30, 0, 30);
  }
  .btn-wrap {
    @include remCalc(margin, 60, 0, 0, 0);
  }
}
.messageMarketing {
  .form-style {
    > li {
      align-items: center;
      > span {
        @include remCalc(font-size, 32);
        color: #333;
        display: flex;
        align-items: center;
        i {
          @include remCalc(font-size, 80);
          @include remCalc(margin-right, 20);
          &.zhk-fsdx {
            color: #ff7d58;
          }
          &.zhk-fsju {
            color: #f8b34c;
          }
          &.zhk-qmgl {
            color: #19bd9b;
          }
        }
      }
    }
  }
  .top {
    background: #fff;
    text-align: center;
    .title {
      @include remCalc(font-size, 32);
      @include remCalc(padding, 92, 0, 40, 0);
      color: #666;
    }
    .num {
      @include remCalc(font-size, 80);
      color: #333;
    }
    .charge-btn {
      display: inline-block;
      @include remCalc(font-size, 24);
      @include remCalc(border-radius, 8);
      @include remCalc(padding, 0, 26);
      @include remCalc(line-height, 40);
      @include remCalc(margin, 20, 0, 72, 0);
      border: 1px solid $color-red;
      color: $color-red;
      text-align: center;
    }
  }
}
.signManage {
  .form-style {
    .btn {
      @include remCalc(font-size, 24);
      @include remCalc(border-radius, 8);
      @include remCalc(padding, 0, 30);
      @include remCalc(line-height, 44);
      color: $color-red;
      border: 1px solid $color-red;
      text-align: center;
      &.disabled {
        color: #fd8217;
        border: 1px solid #fd8217;
      }
    }
  }
  .update-sign-name {
    @include remCalc(padding, 30);
    text-align: center;
    .sign-name {
      border: 1px solid $color-border;
      overflow: hidden;
      @include remCalc(padding, 10);
      box-sizing: border-box;
    }
    .title {
      @include remCalc(font-size, 32);
      @include remCalc(padding, 30);
    }
    input {
      @include remCalc(height, 60);
      @include remCalc(padding, 0, 10);
      box-sizing: border-box;
      width: 100%;
      border: 1px solid #ddd;
      -webkit-appearance: none;
    }
    .tip {
      @include remCalc(font-size, 24);
      color: #999;
    }
  }
}
.sendMessage {
  .top-tip {
    background: #ebf5ff;
    color: $color-red;
    @include remCalc(font-size, 24);
    @include remCalc(padding, 10, 50, 10, 30);
    line-height: 1.5;
    position: relative;
    i.zhk-alert_close {
      position: absolute;
      @include remCalc(top, 16);
      @include remCalc(right, 30);
      color: #333;
    }
    i.zhk-order_fa {
      @include remCalc(margin-right, 10);
    }
  }
  .filed-tip {
    @include remCalc(font-size, 24);
    color: #999;
    @include remCalc(padding, 20, 30);
  }
  .input-wrap {
    @include thin-border(true, false);
    background: #fff;
    position: relative;
    width: 100%;
    box-sizing: border-box;
    @include remCalc(padding, 20, 30, 56, 30);
    @include remCalc(font-size, 32);
    color: #333;
    textarea {
      width: 100%;
      @include remCalc(font-size, 32);
      color: #333;
    }
    .input-bottom {
      position: absolute;
      @include remCalc(right, 30);
      @include remCalc(bottom, 20);
    }
  }
  .btn-wrap{
    @include remCalc(margin-top, 60);
  }
  .form-style{
    .disabled{
      color:#999;
    }
  }
  .mb20{
    @include remCalc(margin-bottom, 20);
  }
}
.sendRecord {
  .no-more {
    text-align: center;
    color: #999;
    @include remCalc(font-size, 24);
    @include remCalc(padding-top, 30);
  }
  .date-wrap {
    @include remCalc(padding, 16, 30);
    @include thin-border(true, false);
    background: #fff;
    .date {
      @include remCalc(padding, 8, 20);
      background: $background;
      @include remCalc(font-size, 28);
      color: #999;
    }
  }
  .record-list {
    > li {
      @include thin-border(true, false);
      background: #fff;
      @include remCalc(padding, 0, 0, 0, 30);
      @include remCalc(margin-top, 20);
      .top {
        @include thin-border(false, false, bottom);
        @include remCalc(padding, 0, 30, 0, 0);
        @include remCalc(line-height, 60);
        @include remCalc(font-size, 24);
        color: #333;
        display: flex;
        justify-content: space-between;
        .blue {
          color: $color-red;
        }
        .red {
          color: #f5364e;
        }
      }
      .info {
        line-height: 1.5;
        @include remCalc(font-size, 28);
        color: #333;
        @include remCalc(padding, 10, 30, 10, 0);
        > div {
          @include remCalc(padding, 10, 0);
          &.send-content {
            @extend %text-overflow;
          }
        }
      }
      .ope {
        @include remCalc(padding, 20, 30, 30, 0);
        display: flex;
        justify-content: flex-end;
        @include thin-border(false, false, top);
        .btn {
          @include remCalc(margin-left, 20);
          @include remCalc(line-height, 48);
          @include remCalc(border-radius, 12);
          border: 1px solid $color-red;
          color: $color-red;
          @include remCalc(font-size, 28);
          @include remCalc(padding, 0, 16);
        }
      }
    }
  }
}
.sendDetails {
  -webkit-user-select: text;
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  .top-info {
    @include thin-border(true, false);
    background: #fff;
    @include remCalc(padding, 20, 30);
    .title {
      @include remCalc(margin-bottom, 20);
      @include remCalc(font-size, 32);
      color: #333;
    }
    .status {
      @include remCalc(line-height, 36);
      @include remCalc(padding, 0, 10);
      @include remCalc(font-size, 24);
      @include remCalc(border-radius, 4);
      color: #999;
      border: 1px solid #999;
      text-align: center;
      display: inline-block;
    }
    ul {
      > li {
        display: flex;
        @include remCalc(padding, 6, 0);
        @include remCalc(font-size, 24);
        color: #999;
        > span {
          @include remCalc(min-width, 146);
          @include remCalc(padding, 0, 20, 0, 0);
        }
        > div {
          word-break: break-all;
          color: #333;
          line-height: 1.5;
          &.red {
            color: #f5364e;
          }
        }
      }
    }
  }
  .bottom {
    @include thin-border(true, false);
    @include remCalc(margin, 10, 0, 0, 0);
    .title {
      @include thin-border(false, false, bottom);
      background: #fff;
      @include remCalc(padding, 20, 30);
      @include remCalc(font-size, 32);
      color: #333;
    }
    .bottom-info {
      background: #fff;
      @include remCalc(padding, 10, 30);
      > li {
        @include remCalc(padding, 10, 0);
        @include remCalc(font-size, 32);
        color: #333;
        display: flex;
        > span {
          color: #999;
          @include remCalc(padding, 0, 20, 0, 0);
        }
        > div {
          flex: 1;
          text-align: right;
          .btn-copy {
            @include remCalc(line-height, 36);
            @include remCalc(padding, 0, 10);
            @include remCalc(font-size, 24);
            @include remCalc(border-radius, 4);
            color: $color-red;
            border: 1px solid $color-red;
            text-align: center;
            display: inline-block;
          }
        }
      }
      .msg-content {
        @include remCalc(font-size, 32);
        color: #333;
      }
    }
  }
}
